<template>
  <div class="commend">
    <div class="title">
      <img v-if="userInfo" :src="userInfo.user_img" alt />
      <img v-else src="../../assets/default_img.jpg" alt />
      <div class="input">
        <input ref="inputRef" v-model="commentPublish.comment_content" placeholder="说点什么吧" />
      </div>
      <button @click="publishComment">发表</button>
    </div>

    <div v-if="commentList">
      <div class="commendcontent" :key="index" v-for="(item,index) in commentList">
        <div class="first">
          <img v-if="item.userinfo && item.userinfo.user_img" :src="item.userinfo.user_img" alt />
          <img v-else src="../../assets/default_img.jpg" alt />
          <div class="detail">
            <p class="user" v-if="item.userinfo.name">{{item.userinfo.name}}</p>
            <p class="user" v-else>此用户无姓名</p>
            <p class="date">{{item.comment_date}}</p>
            <p class="content">{{item.comment_content}}</p>
            <a class="publish" @click="replyComment(item.comment_id)">回复</a>
          </div>
        </div>
        <second-commend @publishChild="replyComment" :commendChild="item.child"></second-commend>
      </div>
    </div>
  </div>
</template>

<script>
import secondCommend from '@/components/home/secondCommend'

export default {
  data() {
    return {
      userInfo: null,
      commentList: null,
      commentPublish: {
        comment_content: '',
        comment_date: '',
        article_id: '',
        parent_id: null,
      },
    }
  },
  components: {
    secondCommend,
  },
  created() {
    if (window.sessionStorage.getItem('token')) {
      this.getUserInfo(), //否则会报错
        this.getCommentList()
    }
  },
  methods: {
    // 获取登录的用户信息
    async getUserInfo() {
      const id = window.sessionStorage.getItem('id')
      const res = await this.$axios.get('/user/' + id)
      //   console.log(res)
      this.userInfo = res.data[0]
    },
    //点击发表进行发布评论
    async publishComment() {
      if (!this.userInfo && !sessionStorage.getItem('id') && !sessionStorage.getItem('token')) {
        this.$toast.fail('请先登录')
        return
      }
      if (this.commentPublish.comment_content.trim().length == 0) {
        return this.$toast.fail('评论不可为空')
      }
      this.commentPublish.comment_date = this.getDate()
      // console.log(this.getDate())
      this.commentPublish.article_id = this.$route.params.id
      const id = window.sessionStorage.getItem('id')
      const res = await this.$axios.post('/comment_post/' + id, this.commentPublish)
      // console.log(res)
      this.commentPublish.comment_content = ''
      this.getCommentList()
      this.commentPublish.parent_id = null
      if (res.status == 200) {
        this.$toast.success('评论成功')
      }
    },
    // 获取评论列表
    async getCommentList() {
      const res = await this.$axios.get('/comment/' + this.$route.params.id)
      // console.log(res.data.length)
      if (res.data) {
        this.$emit('getLength', res.data.length)
      }
      // console.log(res)
      this.commentList = this.setCommentData(res.data)
      // console.log(this.commentList)
      //   this.commentList = res.data
    },
    getDate() {
      var date = new Date()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d

      return m + '-' + d
    },
    // 对评论数据进行格式化
    setCommentData(data) {
      function fn(temp) {
        let arr1 = []
        for (var i = 0; i < data.length; i++) {
          if (data[i].parent_id == temp) {
            arr1.push(data[i])
            data[i].child = fn(data[i].comment_id)
          }
        }
        return arr1
      }
      return fn(null)
    },
    replyComment(id) {
      this.commentPublish.parent_id = id
      this.$refs.inputRef.focus()
    },
  },
}
</script>

<style lang="stylus" scoped>
.title {
  display: flex;
  align-items: center;
  margin: 2.778vw 0;
  padding: 0 3.333vw;
}

.title img {
  width: 7.222vw;
  height: 7.222vw;
  border-radius: 50%;
}

.input {
  flex: 1;
}

input {
  background-color: #f4f4f4;
  width: 86%;
  border-radius: 5.556vw;
  margin: 0 2.778vw;
  padding-left: 5.556vw;
  height: 8.333vw;
  line-height: 8.333vw;
}

.title button {
  border-radius: 4.444vw;
  background-color: #fb7299;
  color: #fff;
  padding: 0 4.167vw;
  height: 8.333vw;
  line-height: 8.333vw;
}

.commendcontent {
  padding: 3.611vw 3.611vw 3.611vw 0;
  border-bottom: 0.278vw solid #e7e7e7;
}

.first {
  padding: 2.222vw 3.333vw;
  display: flex;
  position: relative;
}

.publish {
  position: absolute;
  right: 8.056vw;
  bottom: 13.611vw;
  font-size: 3.889vw;
  color: #fb7299;
}

.first img {
  width: 9.444vw;
  height: 9.444vw;
  border-radius: 50%;
  margin-right: 4.167vw;
}

.user {
  font-size: 4.167vw;
  color: #757575;
}

.date {
  font-size: 3.611vw;
  margin: 1.944vw 0;
  color: #757575;
}

.content {
  font-size: 4.167vw;
  color: #212121;
  white-space: pre-line;
  word-break: break-word;
}
</style>
